<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            text-align: center;
        }
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas width="600" height="600"></canvas>
<!--鼠标按下获取定点
    鼠标抬起获取宽高
    -->

<script>
    var cas=document.querySelector("canvas");
    var ctx=cas.getContext("2d")

    var sx,sy;
    cas.onmousedown=function(e){
        sx= e.offsetX;
        sy= e.offsetY;
    }
    cas.onmouseup=function(e){
        var ex= e.offsetX;
        var ey= e.offsetY;
        //计算宽度和高度

        var width=ex-sx;
        var height=ey-sy;
        //画矩形
        ctx.strokeRect(sx,sy,width,height)
    }



</script>



</body>
</html>